<!--
 * @Author: byron
 * @Date: 2022-02-23 09:13:59
 * @LastEditTime: 2022-02-23 14:22:28
-->
<template>
    <div class="index-page" style="margin-bottom: 50px">
        <div class="top-warp">
            <div class="tag-one">
                <div class="tag-item">
                    <span class="tag-img"
                        ><img src="../../../assets/image/hotel.png" alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img src="../../../assets/image/hotel.png" alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img src="../../../assets/image/hotel.png" alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img src="../../../assets/image/hotel.png" alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img src="../../../assets/image/hotel.png" alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
            </div>
            <div class="tag-two">
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/f5e5770393d759578962e53ee67798c8.png"
                            alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/f5e5770393d759578962e53ee67798c8.png"
                            alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/f5e5770393d759578962e53ee67798c8.png"
                            alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/f5e5770393d759578962e53ee67798c8.png"
                            alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/f5e5770393d759578962e53ee67798c8.png"
                            alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
            </div>
            <div class="tag-there">
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png"
                            alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png"
                            alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png"
                            alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png"
                            alt=""
                    /></span>
                    <span style="display: block">酒店</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/f6bb08a239ce1b038204120a8d1e4669.png"
                            alt=""
                    /></span>
                    <span style="display: block">特惠</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/f6bb08a239ce1b038204120a8d1e4669.png"
                            alt=""
                    /></span>
                    <span style="display: block">特惠</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/f6bb08a239ce1b038204120a8d1e4669.png"
                            alt=""
                    /></span>
                    <span style="display: block">特惠</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/f6bb08a239ce1b038204120a8d1e4669.png"
                            alt=""
                    /></span>
                    <span style="display: block">特惠</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/f6bb08a239ce1b038204120a8d1e4669.png"
                            alt=""
                    /></span>
                    <span style="display: block">特惠</span>
                </div>
                <div class="tag-item">
                    <span class="tag-img"
                        ><img
                            src="https://picbed.qunarzz.com/f6bb08a239ce1b038204120a8d1e4669.png"
                            alt=""
                    /></span>
                    <span style="display: block">特惠</span>
                </div>
            </div>
        </div>
        <div class="holiday-warp">
            <div class="holiday-title">特惠度假</div>
            <div class="holiday-select">
                <div class="holiday-button">当季热门度假</div>
                <div class="holiday-button">今日特惠度假</div>
            </div>
            <div class="holiday-body">
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://imgs.qunarzz.com/vs_ceph_b2c_001/e8bd3d45-bbea-45f8-8145-bdb57cbe9a3b.jpg_180x120x90_7ddd9f47.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">武汉大力 5天跟团游</p>
                        <p class="desc">无自费无购物</p>
                        <p class="price">2138起</p>
                    </div>
                </div>
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://imgs.qunarzz.com/vs_ceph_b2c_001/e8bd3d45-bbea-45f8-8145-bdb57cbe9a3b.jpg_180x120x90_7ddd9f47.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">武汉大力 5天跟团游</p>
                        <p class="desc">无自费无购物</p>
                        <p class="price">2138起</p>
                    </div>
                </div>
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://imgs.qunarzz.com/vs_ceph_b2c_001/e8bd3d45-bbea-45f8-8145-bdb57cbe9a3b.jpg_180x120x90_7ddd9f47.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">武汉大力 5天跟团游</p>
                        <p class="desc">无自费无购物</p>
                        <p class="price">2138起</p>
                    </div>
                </div>
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://imgs.qunarzz.com/vs_ceph_b2c_001/e8bd3d45-bbea-45f8-8145-bdb57cbe9a3b.jpg_180x120x90_7ddd9f47.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">武汉大力 5天跟团游</p>
                        <p class="desc">无自费无购物</p>
                        <p class="price">2138起</p>
                    </div>
                </div>
            </div>
            <div class="holiday-more">更多特惠度假</div>
        </div>
        <div class="holiday-warp" style="margin-top: 10px">
            <div class="holiday-title">特惠门票</div>
            <div class="holiday-select">
                <div class="holiday-button">当季景点门票</div>
                <div class="holiday-button">特惠门票</div>
            </div>
            <div class="holiday-body">
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://imgs.qunarzz.com/vs_ceph_b2c_001/e8bd3d45-bbea-45f8-8145-bdb57cbe9a3b.jpg_180x120x90_7ddd9f47.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">八达岭长城</p>
                        <p class="desc">不到长城非好汉</p>
                        <p class="price">34.8</p>
                    </div>
                </div>
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://imgs.qunarzz.com/vs_ceph_b2c_001/e8bd3d45-bbea-45f8-8145-bdb57cbe9a3b.jpg_180x120x90_7ddd9f47.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">武汉大力 5天跟团游</p>
                        <p class="desc">无自费无购物</p>
                        <p class="price">2138起</p>
                    </div>
                </div>
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://img1.qunarzz.com/sight/p0/2005/39/3979f1867defec4ea3.water.jpg_256x160_6ae804bb.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">武汉大力 5天跟团游</p>
                        <p class="desc">无自费无购物</p>
                        <p class="price">2138起</p>
                    </div>
                </div>
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://img1.qunarzz.com/sight/p0/2005/39/3979f1867defec4ea3.water.jpg_256x160_6ae804bb.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">武汉大力 5天跟团游</p>
                        <p class="desc">无自费无购物</p>
                        <p class="price">2138起</p>
                    </div>
                </div>
            </div>
            <div class="holiday-more">更多特惠门票</div>
        </div>
        <div class="holiday-warp" style="margin-top: 10px">
            <div class="holiday-title">旅行攻略</div>
            <div class="holiday-select">
                <div class="holiday-button">趣味亲子游</div>
                <div class="holiday-button">旅拍也要出大片</div>
            </div>
            <div class="holiday-body">
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://imgs.qunarzz.com/vs_ceph_b2c_001/e8bd3d45-bbea-45f8-8145-bdb57cbe9a3b.jpg_180x120x90_7ddd9f47.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">驾一叶扁舟</p>
                        <!-- <p class="desc">不到长城非好汉</p> -->
                        <!-- <p class="price">34.8</p> -->
                    </div>
                </div>
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://imgs.qunarzz.com/vs_ceph_b2c_001/e8bd3d45-bbea-45f8-8145-bdb57cbe9a3b.jpg_180x120x90_7ddd9f47.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">不负盛夏</p>
                        <!-- <p class="desc">无自费无购物</p> -->
                        <!-- <p class="price">2138起</p> -->
                    </div>
                </div>
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://img1.qunarzz.com/sight/p0/2005/39/3979f1867defec4ea3.water.jpg_256x160_6ae804bb.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">探访日本</p>
                        <!-- <p class="desc">无自费无购物</p> -->
                        <!-- <p class="price">2138起</p> -->
                    </div>
                </div>
                <div class="body-item">
                    <span class="img-warp">
                        <img
                            src="https://img1.qunarzz.com/sight/p0/2005/39/3979f1867defec4ea3.water.jpg_256x160_6ae804bb.jpg"
                            alt=""
                        />
                    </span>
                    <div class="img-desc">
                        <p class="name">厦门，带娃出行与幸福同行</p>
                        <!-- <p class="desc">无自费无购物</p> -->
                        <!-- <p class="price">2138起</p> -->
                    </div>
                </div>
            </div>
            <div class="holiday-more">更多旅行攻略</div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
export default {
    name: '',
    setup() {
        console.log('1-开始创建组件-setup')
        const data = reactive({})
        onBeforeMount(() => {
            console.log('2.组件挂载页面之前执行----onBeforeMount')
        })
        onMounted(() => {
            console.log('3.-组件挂载到页面之后执行-------onMounted')
        })
        return {
            ...toRefs(data),
        }
    },
}
</script>
<style scoped lang="less">
.index-page {
    padding: 10px;
    .top-warp {
        .tag-one {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;

            .tag-item {
                width: 20%;
                text-align: center;
                .tag-img {
                    display: inline-block;
                    width: 75%;
                    padding-bottom: 5%;
                }
            }
        }
        .tag-two {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            .tag-item {
                width: 20%;
                text-align: center;
                .tag-img {
                    display: inline-block;
                    padding-bottom: 5%;
                    width: 55%;
                }
            }
        }
        .tag-there {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            flex-wrap: wrap;
            .tag-item {
                width: 20%;
                text-align: center;
                .tag-img {
                    display: inline-block;
                    padding-bottom: 5%;
                    width: 46%;
                }
            }
        }
    }
    .holiday-warp {
        .holiday-title {
            color: #26282a;
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 0.08rem;
            margin-top: 0.08rem;
        }

        .holiday-select {
            display: flex;
            margin-top: 6px;
            .holiday-button {
                margin-right: 10px;
                padding: 6px 10px;
                border: 1px solid #e7e7e7;
                border-radius: 4px;
                &:hover {
                    padding: 6px 10px;
                    background-color: #17c0c8;
                    color: #fff;
                    border-radius: 4px;
                }
            }
        }

        .holiday-body {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 10px;
            .body-item {
                text-align: center;
                width: 48%;
                margin-bottom: 4px;
                .img-warp {
                    border-radius: 4px;
                    overflow: hidden;
                    display: inline-block;
                }
                .name {
                    text-align: left;
                    font-size: 12px;
                }
                .desc {
                    text-align: left;

                    font-size: 12px;
                    color: #c1c2c1;
                }
                .price {
                    text-align: left;

                    font-weight: 700;
                    color: #fdd805;
                }
            }
        }
        .holiday-more {
            margin: 30px 0;
            border: 1px solid blue;
            color: blue;
            padding: 6px 10px;
            text-align: center;
            border-radius: 4px;
        }
    }
}
</style>
